<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小米官网</title>

<script  src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     var b=0;
     var Time;
     function imgcha(){ $(".list li").eq(b).addClass("active").siblings().removeClass("active");
     $(".pic img").eq(b).stop(true).fadeIn().siblings().hide(); };
   $(".list li").hover(function() {
   b =$(this).index();
   	
   imgcha();
  
     });
   $(".right").click(function(){
   	if(b<4){
   	b++;}else{b=0};
   
    imgcha();
   });
   $(".left").click(function(){
   		if(b<4){
   	b++;}else{b=0};
   
    imgcha();
   });
  
  function play(){Time=setInterval(function(){if(b<4){
   	b++;}else{b=0}; imgcha();},2000);
};
 play();


 $(".icon").hover(function() {
clearInterval(Time),
function(){play();};});



$(".mi3 ul li").hover(function(){
	$(this).find('.ce1').show();},
	function(){
	$(this).find('.ce1').hide();
})



});






</script>


	<style type="text/css">
		#box{
			background: #313030;
			width: 100%;
			height: 40px;
			margin: 0px;
		    padding: 0;
			}
	div,body,ul{
				margin: 0px;
				padding: 0px;
				font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
						}
	    #yo1 ul{padding-left: 70px; }
	    #yo2 ul{padding-right: 30px; }

	   
        #yo1 li{
               color: #FFFAFA;
         	   border:0px solid #D8D4D4;
         	  line-height: 40px;
               margin:0px;
          
               padding-left: 10px;
               float: left;
               text-align:center;
          
              list-style-type: none; 
           
             }
         #yo2 li{
               color: #FFFAFA;
         	  border:0px solid #D8D4D4;
         	  line-height: 40px;
               margin:0px;
               padding: 0 10px;
               padding-left: 0px;
              float: right;
               text-align:center;
          
              list-style-type: none; 
             }
         
      .sep{
      	margin: 0 .5em;
       color: #424242;
       line-height: 40px;
       }
        
  #box  a{
         		width:100%;/*设置元素宽为80px*/
                height:15px;/*设置高度为28px*/
               color:#AEAAAA;/*文字颜色是白色*/
              font-size:12px;/*用12号字*/
              text-decoration:none; /*去掉下划线*/
              
              text-decoration:none;
                         
                      }   
     #box ul li a:hover{color:#fff;}
    
    .xiao {width: 100%;
           height: 100px;
           float: left;
            font: 16px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
          
      }
   
     .xiao1{width: 55px;
           height:55px;
      padding:19px 10px 19px 80px;
      	     float: left;}
     .xiao2 ul { width:850px;/*设置元素宽为80px*/
                height:88px;/*设置高度为28px*/
     	        float: left;
    	       font: 16px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
           
              list-style-type: none; 
             
               text-align:center;
               line-height: 80px;
               position: relative;
             z-index: 10;
            margin: 0;
           padding: 12px 0 0 1px;
    } 

    .xiao2 ul li{ 
     	        float: left;
               padding:0px 20px ;

     	       }
  .xiao2  ul li span:hover{color:#ff6700; }
   .xiao3{
   	       width: 250px;
           height: 50px;
           float: right;
           padding:20px 90px 20px 10px;
           
        
       
}

.xiao3  input{width: 256px;
           height: 50px;
       text-align:right;
    background-image: url("F:\网站\图片/sousuo.png"); 
background-repeat: no-repeat;
display: inline-block;
margin-left: 0px;
padding:0px 10px 0px 0px;
font-size: 12px;
border: 1px solid  #757575;



}









.mi3{
	 background: rgba(0, 0, 0,0.7);
     left: 0px;
     width: 234px;
	 height: 460px;
	 border: 1px solid #ff6700;
     position: relative;
	top: -463px;
}

.mi3 ul{margin-top: 25px;
         margin-bottom: 20px;
}


.mi3 li{list-style-type: none; 
	     width: 234px;
	     height:42px;
	  
	     line-height: 42px;


	 }

.mi3 li a{font-size: 14px;
	       padding-left: 30px;
           height: 42px;
         
         text-decoration: none;
          font: 15px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei";
         color:#fff;
        
            }
 

 	    

.mi3 ul li:hover{background:#ff6700;}

.mi3 ul li .ce1{width: 500px;
                height: 460px;
                position: absolute;
                left: 235px; 
                top: -26px;
                display: none;
               background:#03FCCC;

               }	







    .mi{width: 1226px;
    	height: 460px;
    	padding:100px 80px 0px 80px; 
    	
     position: relative;
    }      

    .con{
    	width: 1226px;
    	height: 460px;
    	border: 1px solid #12F5D7;
    	position: relative;/*相对定位，参照物*/

    } 
    .pic{width: 1226px;
    	height: 460px;

    }  
    .pic img{
    	position: absolute;/*绝对定位*/
             display: none;

    }

    .list{ list-style-type: none; 
    	   width:400px;
    	   height: 10px;
    	   background: rgba(0, 0, 0,0);/*使用透明色，最后一个属性中0表示全透明，1表示不透明，小数表示半透明。border*/
             padding:1px 1px;
             position: absolute;
             bottom: 20px;
             left: 1100px ;
    	        }
     .list li{float: left;
               width: 8px;
               height: 8px;
               border:1px solid #fff;
               border-radius: 6px;
               margin: 1px  3px;
               background: #A09E9E;}
      
     .list .active{
     	background: #FFFFFF;
     }
               
     .but li{
              list-style: none;
              font-size: 40px;
              text-align: center;
              line-height: 70px;
              color:#8A8888;
              position: absolute;
              top: 180px;

             
      }  
      .but li img{width: 41px;
                  height: 70px;
                  display: none;
                  color:#8A8888;
             cursor: pointer;/*改为手指*/}
      .but.left{ left: 20px; }
      .but .right{right:0px;}
     .con:hover .but img{display: block;}
     
      
     
     .mi2{width:1226px;
             height: 170px;
             color:#8A8888;                    
             
             margin:20px 80px;
             
            }
       #xiao5 ul li{
         
         float:left;
       	list-style-type: none; 
       	 padding: 0px 6px; 
         width:316px;
         height: 170px;
         }
      #xiao5 img{
         width:316px;
         height: 170px;
      }
     
	#xiao6{width:234px;
         height: 170px;
         float: left;
        margin-right:8px; 
        background: #5f5750;
    }
    #xiao6 ul{margin: 0;
padding: 3px;
list-style-type: none;
font-size: 12px;
text-align: center;
background: #5f5750;}

    #xiao6 li{
    	width: 70px;
        height: 82px;

       float: left;
   	 list-style-type: none; 
     padding: 0 3px;
    display: list-item;
   
      }
     #xiao6 li a{
     	display: block;
        padding-top: 18px;
       text-overflow: ellipsis;
       white-space: nowrap;
        overflow: hidden;
        color: #fff;
       color: rgba(255,255,255,0.7);
       
        text-decoration: none;
         transition: color .2s;
         cursor: auto;}
 .iconfont {
font-family: "iconfont" !important;
font-style: normal;
}








</style>
</head>


<body>

<div id="box">
	 <div id="yo1">
       <ul >
      <li><a href="http://www.mi.com/">小米商城 <span class="sep">|</span>
</a></li>
      
      <li><a href="http://www.miui.com/">MIUI <span class="sep">|</span>
</a></li>
      
      <li><a href="http://www.miliao.com/">米聊 <span class="sep">|</span>
</a></li>
      
      <li><a href="http://game.xiaomi.com/">游戏 <span class="sep">|</span>
</a></li>
      
      <li><a href="http://www.duokan.com/">多看阅读 <span class="sep">|</span>
</a></li>
      
      <li><a href="https://i.mi.com/">云服务 <span class="sep">|</span>
</a></li>
      
      <li><a href="https://jr.mi.com">金融 <span class="sep">|</span>
</a></li>
      
      <li><a href="//www.mi.com/c/appdownload">小米网移动版 <span class="sep">|</span>
</a></li>
      
      <li><a href="//static.mi.com/feedback/">问题反馈
      <span class="sep">|</span>
      </a></li>
      <li><a href="#">Select Region</a></li>
      </ul>
   </div>
  <div  id="yo2">
      <ul>
        <li><a href="#">登录</a></li>
        <li><a href="#">注册</a><span class="sep">|</span></li>
      </ul>
   </div>

  
</div>
    

<div class="xiao">
     <div class="xiao1">
    
    <a href="http://www.mi.com/"><img src="F:\网站\图片/logomi.png"></a>

     </div>
     <div  class="xiao2">
    	<ul>
    		<li><span>小米手机</span></li>
    		<li><span>红米</span></li>
    		<li><span>平板 · 笔记本</span></li>
    		<li><span>电视</span></li>
    		<li><span>盒子 · 影音</span></li>
    		<li><span>路由器</span></li>
    		<li><span>智能硬件</span></li>
    		<li><span>服务</span></li>
    		<li><span>社区</span></li>
    	</ul>
     </div>
    <div class="xiao3">
      <form >
       <table cellpadding="0px" margin="0px">
       <tr>
         <td>
    	<input type="text" name="sousuo" value="红米Note4   小米笔记本Air">
    	</td>
        
        <tr>
       </table>
       </form>

        </div>
   </div>

		<div class="mi">
			         <div class="con"><!--图片区*/-->
					         <div class="pic"> 
					    	<a href="http://www.mi.com/"><img src="F:\网站\图片/a.jpg" style="display:block;"></a>
					    	<a href="http://www.mi.com/"><img src="F:\网站\图片/b.jpg"></a>
					    	<a href="http://www.mi.com/"><img src="F:\网站\图片/c.jpg"></a>
					    	<a href="http://www.mi.com/"><img src="F:\网站\图片/d.jpg"></a>
					    	<a href="http://www.mi.com/"><img src="F:\网站\图片/e.jpg"></a>
					    	 </div>
			<!--选项卡*/-->
			    	   <ul class="list">
			    	 	 <li class="active"></li>
			    	 	 <li></li>
			    	 	 <li></li>
			    	 	 <li></li>
			    	 	 <li></li>
			    	   </ul>
			    	   
			<!--左右选项卡*/--> 	
			    	   <ul class="but" onselectstart="return false">
			               <li class="left"> <img src="F:\网站\图片/left.gif"> </li>
			               <li class="right"><img src="F:\网站\图片/right.gif"></li>
			    	   </ul >
			    	 
			       	
		</div>
       
   
				   <div class="mi3">
					<ul>
						<li>
							<a href="//www.mi.com/buyphone/" data-stat-id="46830753a57a2e5a">手机 电话卡</a>
						
							<div class="ce1 none"></div>
						</li>
						<li>
							<a  href="//www.mi.com/mibookair/" data-stat-id="2042589582b51b9f">笔记本 平板</a>
							<div class="ce1 none"></div>
						</li>
						<li>
							<a  href="//www.mi.com/buytv/" data-stat-id="6f890a25c91eccd1">电视 盒子</a>
				          <div class="ce1 none"></div>
						</li>
						<li>
							<a class="title" href="//www.mi.com/smart/" data-stat-id="44a546bb64cac00a">路由器 智能硬件</a>
							<div class="ce1 none"></div>
						</li>
						
						<li>
							<a href="//list.mi.com/accessories/tag?id=dianyuancunchu" data-stat-id="6fdf11296f89d2d7">移动电源 电池 插线板</a>
							<div class="ce1 none"></div>
						</li>
						<li>
							<a href="//list.mi.com/17" data-stat-id="a4277f9d894a1647">耳机 音箱</a>
							<div class="ce1 none"></div>
						</li>
						<li>
							<a  href="//list.mi.com/7" data-stat-id="b6f0c0b43727498e">保护套 贴膜</a>
							<div class="ce1 none"></div>
						</li>
						<li>
							<a  href="//list.mi.com/1" data-stat-id="1bd93f4ff69cf8cc" >线材 支架 存储卡</a>
							<div class="ce1 none"></div>
						</li>
						<li>
							<a  href="//list.mi.com/134" data-stat-id="727264df77b153f2">箱包 服饰</a>
							<div class="ce1 none"></div>
						</li>
						<li>
							<a  href="//list.mi.com/20" data-stat-id="370d463950062b15">米兔 生活周边</a>
							<div class="ce1 none"></div>
						</li>
					</ul>
				</div>

    </div>





   <div class="mi2">
		    <div id="xiao6"> 
		 
		       	<li><a href="//www.mi.com/compare/" data-stat-aid="AA13424" data-stat-pid="2_44_1_250" target="_blank" data-stat-id="AA13424+2_44_1_250" onclick="_msq.push(['trackEvent', '79fe2eae924d2a2e-AA13424+2_44_1_250', '//www.mi.com/compare/', 'pcpid']);"><i class="iconfont"></i>选购手机</a></li>
		       	<li><a href="http://qiye.mi.com/" data-stat-aid="AA10868" data-stat-pid="2_44_2_251" target="_blank" data-stat-id="AA10868+2_44_2_251" onclick="_msq.push(['trackEvent', '79fe2eae924d2a2e-AA10868+2_44_2_251', 'http://qiye.mi.com/', 'pcpid']);"><i class="iconfont"></i>企业团购</a></li>
		       	<li><a href="//item.mi.com/re" data-stat-aid="AA10869" data-stat-pid="2_44_3_252" target="_blank" data-stat-id="AA10869+2_44_3_252" onclick="_msq.push(['trackEvent', '79fe2eae924d2a2e-AA10869+2_44_3_252', '//item.mi.com/re', 'pcpid']);"><i class="iconfont"></i>官翻产品</a></li>
		      
		       	<li><a href="//www.mi.com/mimobile/" data-stat-aid="AA11244" data-stat-pid="2_44_4_253" target="_blank" data-stat-id="AA11244+2_44_4_253" onclick="_msq.push(['trackEvent', '79fe2eae924d2a2e-AA11244+2_44_4_253', '//www.mi.com/mimobile/', 'pcpid']);"><i class="iconfont"></i>小米移动</a></li>
		       	<li><a href="http://huanxin.mi.com/product/list" data-stat-aid="AA12084" data-stat-pid="2_44_5_254" target="_blank" data-stat-id="AA12084+2_44_5_254" onclick="_msq.push(['trackEvent', '79fe2eae924d2a2e-AA12084+2_44_5_254', 'http://huanxin.mi.com/product/list', 'pcpid']);"><i class="iconfont"></i>以旧换新</a></li>
		       	<li><a href="http://recharge.10046.mi.com/" data-stat-aid="AA10871" data-stat-pid="2_44_6_255" target="_blank" data-stat-id="AA10871+2_44_6_255" onclick="_msq.push(['trackEvent', '79fe2eae924d2a2e-AA10871+2_44_6_255', 'http://recharge.10046.mi.com/', 'pcpid']);"><i class="iconfont"></i>话费充值</a></li>		       	
		       </ul>


		    </div>


		     <div id="xiao5">
		  	   <ul>
		  		<li> <a href="http://www.mi.com/"><img src="F:\网站\图片/y.jpg"></a></li>
		  		<li> <a href="http://www.mi.com/"><img src="F:\网站\图片/x.jpg"></a></li>
		  		<li> <a href="http://www.mi.com/"><img src="F:\网站\图片/z.jpg"></a></li>
		  	
		  	   </ul>
		   </div>
</div>

</body>
</html>